<!--
 * @Author: 偻儸小卒[EdisonLiu_]
 * @Date: 1970-01-01 08:00:00
 * @LastEditors: 偻儸小卒[EdisonLiu_]
 * @LastEditTime: 2020-04-13 15:09:59
 * @Description: 首页
 -->
<template>
  <div class="match_list" :key="page_key">
    <div class="match_item">
      <div class="item_top_banner">
        <div class="corner_marker" v-if="showStatus">
          <img
            v-if="match.status == 1"
            src="@/assets/images/plugin/match_start_icon.png"
            alt=""
          />
          <img
            v-if="match.status == 0"
            src="@/assets/images/plugin/match_not_start_icon.png"
            alt=""
          />
          <img
            v-if="match.status == 2"
            src="@/assets/images/plugin/match_end_icon.png"
            alt=""
          />
        </div>
        <img  :src="match.first_picture" :onerror="defaultImg" style="border-top-left-radius:8px;border-top-right-radius:8px;
" alt="" />
      </div>
      <van-skeleton
        title
        :row="2"
        :loading="show_loading"
        class="item_cont_skeleton"
      >
        <div class="item_cont">
          <div class="item_title">
            {{ match.match_title }}
          </div>
          <div class="item_introduce">
            {{ match.match_introduce }}
          </div>
          <div class="item_remark">
            <span class="title">报名截止:</span>
            {{ match.end_time }}
          </div>
          <div v-if="showAudit" class="audit">
            <span v-if="match.pay_status == 2">已退款</span>
            <span v-if="match.pay_status == 1">已报名,请扫组委会客服微信确认</span>
          </div>
          <div v-if="showAudit" class="audit" style="text-align:center">
            <img :src="match.code" :onerror="defaultImg" alt="" style="height:5rem;width:5rem">
          </div>
        </div>
      </van-skeleton>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Skeleton } from "vant";
Vue.use(Skeleton);
export default {
  name: "match_inc",
  data() {
    return {
      show_loading: true,
      page_key: 0,
      username: "",
      password: "",
      tips: "",
      stat: false,
      defaultImg:'this.src="'+this.match.first_picture+'"',
    };
  },
  activated() {
    this.page_key++;
  },
  created() {
    console.log(this.match);
    setTimeout(() => {
      this.show_loading = false;
    }, 500);
  },
  props: {
    match: {
      type: Object,
      default: {
        match_title: "--",
        introduce: "--",
        status: 0,
        start_time: "未设置",
        end_time: "未设置",
        code:''
      }
    },
    showStatus: {
      type: Boolean,
      default: true
    },
    showAudit: { type: Boolean, default: false }
  },
  
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.match_list {
  .match_item {
    width: 100%;
    background: white;
    border-radius: 8px;
    box-shadow: 0rem 0.2rem 0.5rem rgba(100, 100, 100, 0.1);

    .item_cont_skeleton {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

    .item_cont {
      padding: 1rem;
      line-height: 1.6rem;

      .item_title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.9rem;
        font-weight: 900;
        color: #4c4c4c;
      }

      .item_introduce {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #868686;
        font-size: 0.7rem;
      }

      .item_remark {
        font-size: 0.7rem;
        color: #484848;

        .title {
          color: #016dff;
        }
      }

      .audit {
        border-top: 1px solid #ccc;
        padding-top: 0.8rem;
        font-size: 0.7rem;
        color: #ff8a00;
      }
    }

    .item_top_banner {
      width: 100%;
      position: relative;

      .corner_marker {
        position: absolute;
        left: 0;
        top: 0;
        height: 40%;

        img {
          height: 100%;
          width: auto;
          border-top-left-radius:8px;
          border-top-right-radius:8px;
        }
      }

      img {
        width: 100%;
      }
    }
  }
}
</style>